<template>
  <div>
    <div>
      <el-form :inline="true" :model="formSearch" class="demo-form-inline">
        <el-form-item label="分类名称">
          <el-input
            v-model="formSearch.name"
            placeholder="请输入分类名称"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchClick">查询</el-button>
          <el-button type="danger" @click="clearClick">清空</el-button>
          <el-button type="success" @click="addClick">添加分类</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-table :data="tableData" stripe border style="width: 100%">
        <el-table-column prop="id" label="ID" sortable width="80px">
        </el-table-column>
        <el-table-column prop="name" sortable label="分类名称">
        </el-table-column>
        <el-table-column prop="alias" label="分类描述"> </el-table-column>
        <el-table-column label="是否显示" width="100">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.is_show"
              :active-value="1"
              :inactive-value="0"
              @change="(val) => swichEvent(val, scope.row.id)"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button type="primary" plain @click="updateClick(scope.row)"
              >编辑</el-button
            >
            <el-button type="danger" plain @click="deleteClick(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!--        修改框-->
    <el-dialog title="编辑文章分类" :visible.sync="dialogFormVisible">
      <el-form
        ref="upRuleForm"
        :rules="rules"
        :model="updateForm"
        label-position="right"
        label-width="80px"
      >
        <el-form-item label="分类名称" prop="name">
          <el-input
            maxlength="8"
            v-model="updateForm.name"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="分类描述" prop="alias">
          <el-input v-model="updateForm.alias" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateUserEvent">确 定</el-button>
      </div>
    </el-dialog>

    <!--        添加-->
    <el-dialog title="编辑文章分类" :visible.sync="addFormVisible">
      <el-form
        ref="upRuleForm"
        :rules="rules"
        :model="addForm"
        label-position="right"
        label-width="80px"
      >
        <el-form-item label="分类名称" prop="name">
          <el-input
            maxlength="8"
            v-model="addForm.name"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="分类描述" prop="alias">
          <el-input v-model="addForm.alias" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addUserEvent">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { editArticleCate, addArticleCate, getArticleCate } from "@/request";

export default {
  name: "Cate",
  data() {
    return {
      tableData: [],
      addFormVisible: false,
      dialogFormVisible: false,
      formSearch: {
        name: null,
      },
      addForm: {
        name: null,
        alias: null,
      },
      updateForm: {},
      rules: {
        name: [{ required: true, message: "请输入分类名称", trigger: "blur" }],
      },
    };
  },
  created() {
    this.getarticleCate();
  },
  methods: {
    async swichEvent(val, id) {
      let data = await editArticleCate({ id, is_show: val });
      if (data.code != 200) return this.$message.error(data.message);
      this.$message.success(data.message);
      this.getarticleCate();
    },
    async getarticleCate() {
      this.formSearch["is_dele"] = 0;
      let data = await getArticleCate(this.formSearch);
      if (data.code != 200) return this.$message.error(data.message);
      this.tableData = data.data;
    },
    searchClick() {
      this.getarticleCate();
    },
    clearClick() {
      this.formSearch = {
        name: null,
      };
      this.getarticleCate();
    },
    addClick() {
      this.addFormVisible = true;
    },
    updateClick(item) {
      this.dialogFormVisible = true;
      this.updateForm = {
        id: item.id,
        name: item.name,
        alias: item.alias,
      };
    },
    async updateUserEvent() {
      let that = this;
      this.$refs["upRuleForm"].validate(async (valid) => {
        if (!valid) {
          return false;
        }
        let data = await editArticleCate(this.updateForm);
        if (data.code != 200) return this.$message.error(data.message);
        this.$message.success(data.message);
        this.getarticleCate();
        this.dialogFormVisible = false;
      });
    },
    deleteClick(id) {
      this.$confirm("您将删除该用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let data = await editArticleCate({ id, is_dele: 1 });
          if (data.code != 200) return this.$message.error("删除失败!");
          this.$message.success("删除成功!");
          this.getarticleCate();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    addUserEvent() {
      let that = this;
      this.$refs["upRuleForm"].validate(async (valid) => {
        if (!valid) {
          return false;
        }
        let data = await addArticleCate(that.addForm);
        if (data.code != 200) return this.$message.error(data.message);
        this.$message.success("添加成功!");
        this.addFormVisible = false;
        this.getarticleCate();
      });
    },
  },
};
</script>

<style scoped>
</style>
